import React, {Component}       from 'react';
import {
    StyleSheet,
    View,
    ListView,
    Dimensions,
    Text
}from 'react-native';
import BaseNavigationBar        from '../../views/BaseNavigationBar';
import BeansDetail              from '../../utils/BeansDetail';

const {width,height} = Dimensions.get('window');

export default class BeansDetailScreen extends Component {

    constructor(props){
        super(props);
        this.state = {
            noData:'',
            dataSource : new ListView.DataSource(
                { rowHasChanged: (r1, r2) => r1.uuid !== r2.uuid }),
        };
    }

    componentDidMount() {
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(BeansDetail.data)
        });
    }

    popToBack(){
        this.props.navigation.goBack()
    }

    renderRow(rowData){
        return (
            <View style = {styles.cellViewStyle}>
                <View style={styles.bgViewStyle}>
                    <Text style={styles.titleStyle}>{rowData.title}</Text>
                    <Text style={styles.titleStyle}>{rowData.number}</Text>
                </View>
                <View style={styles.bgViewStyle}>
                    <Text style={styles.detailTitleStyle}>{rowData.source}</Text>
                    <Text style={styles.detailTitleStyle}>{rowData.time}</Text>
                </View>
            </View>
        )
    }

    renderFooterView(){
        return (
            <View style={{width: width, height:0.56*40}}/>
        )
    }


    render() {
        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    title={'收入'}
                    leftImageSource={require('../../../images/other/ic_back.png')}
                    leftItemFunc={() => this.popToBack()}/>

                <ListView
                    showsVerticalScrollIndicator={false}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    renderFooter={this.renderFooterView}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    cellViewStyle:{
        backgroundColor:'white',
        height:0.56*120,
        justifyContent:'center',
        alignItems:'center',
        marginTop:1
    },
    bgViewStyle:{
        justifyContent:'space-between',
        flexDirection:'row',
        width:width
    },
    titleStyle:{
        fontSize:15,
        marginLeft:0.56*24,
        marginRight:0.56*24,
        marginTop:0.56*10,
        color:'#353535'
    },
    detailTitleStyle:{
        fontSize:12,
        marginLeft:0.56*24,
        marginTop:0.56*10,
        marginRight:0.56*24,
        color:'#909090'
    }
});
